<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>商品详情</title>
		<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
		<link rel="stylesheet" type="text/css" href="./css/detail.css" />
		<link rel="stylesheet" type="text/css" href="./css/public.css" />
		<link rel="stylesheet" type="text/css" href="css/megaloscope.css">
		<script src="jS/jquery-3.5.1.min.js"></script>
    	<script src="bootstrap/js/bootstrap.min.js"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>  
		<script src="js/detail.js"></script>
		<script src="js/public.js"></script>
		<script src="layer/layer.js"></script> 
	</head>
	<body>
		<!--回到顶部-->
		<div id="back_top">
			<div class="arrow"></div>
			<div class="stick"></div>
		</div>
			<!--回到顶部结束-->
		<!--顶部开始-->
		<div id="top">
			<img class="float" src="img/logo.png" height="92" width="240"/>

		</div>
		<!--顶部结束-->
		<!--导航-->
		<nav id="nav" class="navbar navbar-inverse">
			<div>
				<ul class="nav navbar-nav">
					<li><a  class="text-center" href="index.html">首页</a></li>
					<li><a  class="text-center" href="cart.html">购物车</a></li>
					<li><a  class="text-center" href="#">关于我们</a></li>
				</ul>
			</div>
			<div id="serch" class="right">
				<input type="text" placeholder="搜索"><img src="img/serch.png">
			</div>
		</nav>
		<!--导航结束-->

		<!-- 商品详情信息 开始 -->
		<main>
			<div class="goods">
  				<div class="small">
					<img class="goods_img" height="280" width="230" />
					<div class="slider"></div>
				</div>
				  <!--放大镜区域，大图，设置为none隐藏-->
  				<div id="big">
					<img id="bigImg" src="http://dummyimage.com/560" />
 				</div>
				
				<article class="goods_msg">
				        <h3 class="goods_title">XXXX</h3>
						<p>价格：<span class="price"></span></p>
						<p>原价：<span class="old_price"></span></p>
						<p>折扣：<span class="discount"></span></p>
						<p>库存：<span class="stoc"></span>件</p>
						<p>购买数量：
							<button class="minus">-</button>
							<input type="text" class="itxt" value="1" style="width:50px;">
							<button class="plus">+</button>
						</p>
				</article>
				<div style="clear: both;"></div>
				<button type="submit" class="buy">立即购买</button>
				<button type="submit" class="add add_cart">加入购物车</button>
				<!-- 商品信息展示 结束 -->
				
				<!-- 热门手办 开始 -->
				<div class="hothand">
					<h3>热门手办</h3>
					<ul class="hot">
					</ul>
				</div>
				<div style="clear: both;"></div>
				<!-- 热门手办 结束 -->
			</div>
			
			<!-- 商品描述 开始 -->
			<div class="goods_des">
			    <h3>商品描述</h3>
			    <p class="candicine"></p>
			</div>
			<!-- 商品描述 结束 -->
		</main>
		<!-- 商品详情信息 结束 -->

		    <!--底部-->
			<footer>
				<div id="footer_font">
					<div>
						<h1>关于网站</h1>
						<p><a href="#">关于我们</a></p>
						<p><a href="#">联系我们</a></p>
					</div>
					<div>
						<h1>为什么选择我们？</h1>
						<p><a href="#">7天无理由退货</a></p>
						<p><a href="#">15天退货保障</a></p>
						<p><a href="#">30天换货保障</a></p>
						<p><a href="#">次日达</a></p>
						<p><a href="#">一小时派单快速响应</a></p>
					</div>
					<div>
						<h1>关注我们</h1>
						<p><a href="#">微信</a></p>
						<p><a href="#">帮助</a></p>
						<p>M78-8888888888</p>
					</div>
				</div>
				<div class="footer_url">
					<p class="text-center">Copyright @ 2021.Company name All rights reserved.Believe in light</p>
				</div>
			</footer>
			<!--底部结束-->
	</body>
</html>
